import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Form, Input, Button, Checkbox, message, Drawer } from "antd";
import "antd/dist/antd.css";
import Register from '../../components/Register/Register'
import axios from "axios";
import "./style.css";

export default function Login() {
  let history = useHistory();
  const [loginMessage, setLoginMessage] = useState();
  const [select, setSelect] = useState(false);
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    axios.get("http://localhost:3004/Login").then((res) => {
      setLoginMessage(res.data);
    });
    // 让数据一渲染就将数据渲染出来
    new Promise((resolve) => {
      setTimeout(() => {
        const register = JSON.parse(sessionStorage.getItem("register"));

        resolve(register);
      }, 0);
    }).then((register) => {
      if (register) {
        form.setFieldsValue({ ...register });
      }
      return;
    });
  }, []);

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };

  const onFinish = (values) => {
    let bb = loginMessage.map((e)=>{
      console.log("-=-=-=",e)
    })
    // let aa = loginMessage.filter((...e)=>{
    //   return e.username === values.username && e.password === values.password
    // })
    console.log("text---------------", values.username , loginMessage.username,"bbb",bb);
    // 遍历数组，然后找到他相对应的东西进行匹配
    if (values.username === loginMessage.username) {
      if (values.password === loginMessage.password) {
        values.remember
          ? sessionStorage.setItem("register", JSON.stringify(values))
          : sessionStorage.removeItem("register");
        history.push("/home");
      } else {
        message.error("密码错误");
      }
    } else {
      message.error("账号错误");
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    message.info("不能为空");
  };

  return (
    <div className="Login_back">
      <div className="Login_backs">
        <div className="Login_message site-drawer-render-in-current-wrapper">
          <Form
            style={{ marginRight: "40px", marginTop: "100px" }}
            name="basic"
            form={form}
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: select,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="Password"
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox
                onClick={() => {
                  setSelect(!select);
                }}
              >
                Remember me
              </Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
              <Button
                type="primary"
                style={{ marginLeft: "30px" }}
                onClick={() => {
                  setVisible(true);
                }}
              >
                Register
              </Button>
            </Form.Item>
          </Form>
          <Drawer
              title="Register"
              placement="right"
              onClose={onClose}
              visible={visible}
              getContainer={false}
              placement="top"
              style={{ position: "absolute" }}
            >
              <Register/>
            </Drawer> 
        </div>
      </div>
    </div>
  );
}
